<template>
  <div>

    <MenuSearch @add-menu="addMenu" @batch-remove="batchRemoveMenu"/>

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
      <template #name="{ row }">
        <strong>{{ row.menuName }}</strong>
      </template>

      <template #action="{ row, index }">
        <Button type="success" icon="md-walk" size="small" style="margin-right: 5px" @click="bindSys(row)">绑定系统</Button>
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editMenu(row)">修改</Button>
        <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(index)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <VanPagination v-model="page" :total-items="total"
                         :items-per-page="rows"
                         :show-page-size="5" force-ellipses/>
        </div>
      </template>

    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        @on-close="closeWin(false)"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <!-- 引入菜单表单组件 -->
      <MenuForm :drawer="drawer.row" @close-win="closeWin" ref="menu"></MenuForm>
    </Drawer>

    <BindSys v-model="bind.showModal" :menu-id="bind.menuId"/>

  </div>
</template>
<script>
import MenuForm from '../components/menu/MenuForm.vue'
import DotTag from '../components/DotTag.vue'
import BindSys from "../components/menu/BindSys.vue";
import MenuSearch from "../components/menu/MenuSearch.vue";
import VanPagination from "@/components/VanPagination.vue";

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "",
        row: {menuName: "", icon: "", description: "", state: true, sorted: 1},
      },
      bind: {
        showModal: false,
        menuId: -1 ,
      },
      selection: [], // 选中的所有数据
      page: 1,    // 当前页码
      rows: 10,  // 每页显示条数
      total: 0,  // 总条数
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '菜单名',
          slot: 'name',
          width: 240,
        },
        {
          title: '菜单图标',
          key: 'icon',
          width: 150,
        },
        {
          title: '顺序',
          key: 'sorted',
          width: 80,
        },
        {
          title: '菜单描述',
          key: 'description'
        },
        {
          title: '状态',
          slot: 'status',
          width: 120,
        },
        {
          title: '操作',
          slot: 'action',
          width: 270,
          align: 'center'
        }
      ],
      data: [
        {
          id: 1,
          menuName: 'DashBoard',
          icon: 18,
          description: '主控台、显示系统首页信息',
          sorted: -1,
          state: true
        },
        {
          id: 2,
          menuName: '系统资源管理',
          icon: 18,
          description: '系统资源管理、管理权限资源信息、包含系统、菜单、功能、按钮等资源信息',
          sorted: 1,
          state: true
        },
      ],
    }
  },
  methods: {

    addMenu() {
      this.drawer.state = true;
      this.drawer.title = "添加菜单";
      this.drawer.row = {menuName: "", icon: "", description: "", state: true, sorted: 1}
    },
    editMenu(row) {
      this.drawer.state = true;
      this.drawer.title = "修改菜单";
      this.drawer.row = {...row}
    },
    remove(index) {
      this.$tips.confirm("您确定要删除该菜单吗?").then(ret => {
        this.data.splice(index, 1);
      })
    },
    batchRemoveMenu() {
      if (this.selection.length === 0) {
        this.$tips.warning("请至少选中一个需要删除的菜单");
      } else {
        this.$tips.confirm("您确定要删除该菜单吗?").then(() => {
          // 删除多个菜单
          console.log(this.selection.map(menu => menu.id));
        })
      }
    },
    bindSys(row) {
      this.bind.showModal = true;
      this.bind.menuId = row.id ;
    },
    closeWin(status) {
      this.drawer.state = false;
      this.$refs.menu.resetValidForm();
    }
  },
  components: {
    VanPagination,
    MenuForm,
    DotTag,
    BindSys,
    MenuSearch
  }
}
</script>

